<template>
    <el-table
        :data="data"
        ref="table"
        row-key="id"
        :show-header="showHeader"
        :stripe="stripe"
        :class="{'stripe-inverse': stripeInverse}"
        :border="border"
        :highlight-current-row="highLight"
        :height="height"
        :max-height="maxHeight"
        :empty-text="emptyText || '暂无数据'"
        @current-change="handleCurrentChangeTable"
        @row-click="handleRowClick"
        @cell-mouse-enter="handleCellMouseEnter"
        @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column v-if="selection" type="selection" :width="selection.width || '55'"
                         :align="selection.align" :header-align="selection.headerAlign" :min-width="selection.minWidth"
                         :selectable="checkboxT" :fixed="selection.fixed"></el-table-column>
        <template v-for="(list, index) in tableColumn">
            <el-table-column
                :prop="list.prop"
                :label="list.label"
                :min-width="list.minWidth"
                :width="list.width"
                :align="list.align"
                :header-align="list.headerAlign"
                :fixed="list.fixed"
                :key="index"
                :class-name="list.className"
                :show-overflow-tooltip="list.tooltip"
            >
                <template slot="header" slot-scope="scope">
                    <span v-html="scope.column.label"></span>
                </template>
                <template slot-scope='scope'>
                    <slot v-if="slotColumns&&slotColumns.indexOf(list.prop)>-1" :name="list.prop" v-bind="scope">
                    </slot>
                    <template v-else>{{scope.row[list.prop]}}</template>
                </template>
            </el-table-column>
            <!--预留空卡槽-->
            <slot name="oprate">
            </slot>
        </template>
    </el-table>
</template>

<script>
    export default {
        name: '',
        props: ['data', 'tableColumn', 'slotColumns', 'showHeader', 'stripe', 'stripeInverse',
            'border', 'selection', 'highLight', 'height', 'maxHeight', 'emptyText'],
        data() {
            return {
                multipleSelection: []
            }
        },
        mounted() {
        },
        watch: {
            data() {
                this.data.forEach(row => {
                    if (row.selected || row.checked) this.$refs.table.toggleRowSelection(row, true)
                })
            }
        },
        updated() {
            this.$nextTick(() => {
                this.data.forEach(row => {
                    if (row.selected || row.checked) this.$refs.table.toggleRowSelection(row, true)
                })
                if (this.$refs.table) this.$refs.table.doLayout()
            })
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val
                this.$emit('selectionChange', val)
            },
            handleSelectionAll() {
                // 全选
                this.data.forEach(row => {
                    if (!row.disabled) this.$refs.table.toggleRowSelection(row, true)
                })
            },
            handleSelectionClear() {
                // 取消全部
                this.$refs.table.clearSelection()
            },
            handleSelectionAllToggle() {
                // 反选
                this.$refs.table.toggleAllSelection()
            },
            checkboxT(row, rowIndex) {
                if (row.disabled) {
                    return false
                } else {
                    return true
                }
            },
            handleRowClick(row) {
                this.$emit('rowClick', row)
            },
            handleCellMouseEnter(row) {
                this.$emit('cellMouseEnter', row)
            },
            handleCurrentChangeTable(currentRow, oldCurrentRow) {
                this.$emit('tabCurrentChange', currentRow, oldCurrentRow)
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">

</style>
